<template>
  <div class="brand">
    <div class="navigation">
      <van-icon name="arrow-left" size="20rem" style="width: 10%;" @click="$router.go(-1)" />
      <p>品牌商详情</p>
    </div>
    <div class="brandvalue" :style="{
      backgroundImage: 'url(' + info.picUrl + ')',
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      width: '100%',
      height: '200rem',
    }">
      <p>{{ info.name }}</p>
      <p></p>
    </div>
    <div class="brandvalue1">
      <p>{{ info.desc }}</p>
    </div>
    <div class="classvalue">
      <div v-for="(item, index) in listinfo" :key="index" @click="classvalue(item.id)">
        <img :src="item.picUrl" alt="" />
        <p class="classvaluetext1">{{ item.name }}</p>
        <p class="classvaluetext2">¥ {{ item.counterPrice }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { service } from "../api/config";
export default {
  name: "brand",
  data() {
    return {
      id: "",
      info: [],
      listinfo: [],
    };
  },
  methods: {
    classvalue(id) {
      this.$store.commit('setValueDetail', id)
      this.$router.push("/shopping");
    },
  },
  mounted() {
    service.get("/wx/brand/detail", {
      params: {
        id: this.$route.query.id
      }
    }).then(res => {
      this.info = res.data.data;
      service.get("/wx/goods/list", {
        params: {
          brandId: this.$route.query.id
        }
      }).then(res => {
        this.listinfo = res.data.data.list;
        console.log(this.listinfo);
      });
    })
  }
}
</script>

<style scoped>
.brand {
  background-color: #F4F4F5;
  height: 100%;
}

.navigation {
  padding-top: 10rem;
  padding-left: 10rem;
  padding-right: 10rem;
  padding-bottom: 10rem;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
}

.navigation p {
  width: 90%;
  padding-top: 0rem;
  margin-top: 0rem;
  display: inline-block;
  font-size: 14rem;
  font-weight: bold;
  text-align: center;
}

.brandvalue {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 45px;
}

.brandvalue p {
  margin-top: 0rem;
  color: #f7f4f4;
  padding-top: 70rem;
  font-size: 18rem;
  text-align: center;
}

.brandvalue p:nth-child(2) {
  border-top: 1rem solid #fff;
  text-align: center;
  width: 20%;
  /* margin-left: 160rem; */
}

.brandvalue1 {
  background-color: #fff;
}

.brandvalue1 p {
  margin-top: 0rem;
  font-size: 14rem;
  padding-top: 15px;
  color: #5f5e5e;
  padding-left: 15px;
  margin-bottom: 20px;
  padding-right: 15px;
  padding-bottom: 15px;
  text-align: center;
}

.classvalue {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.classvalue div {
  background-color: #fff;
  width: 49%;
  margin-left: 2px;
  margin-top: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
}

.classvalue div img {
  width: 100%;
}

.classvalue div p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.classvaluetext1 {
  font-size: 13rem;
  text-align: center;
}

.classvaluetext2 {
  font-size: 13rem;
  color: red;
  margin-top: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
</style>